<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="500"
      :title="ruleForm.id === 0 ? '新增机构' : '编辑机构'"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 400px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="机构名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入机构名称" />
          </el-form-item>
          <el-form-item label="选择省份：" prop="province">
            <el-cascader
              v-model="ruleForm.city"
              style="width: 400px"
              :options="options"
              :props="{ label: 'n', value: 'n', children: 'c' }"
              @change="handlechange"
            />
          </el-form-item>
          <el-form-item label="所属区域" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入所属区域" />
          </el-form-item>
          <el-form-item label="管理员名称" prop="adminName">
            <el-input v-model="ruleForm.adminName" placeholder="请输入管理员名称" />
          </el-form-item>
          <el-form-item label="联系电话" prop="adminMobile">
            <el-input v-model="ruleForm.adminMobile" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="管理员账号" prop="adminUserName">
            <el-input v-model="ruleForm.adminUserName" placeholder="请输入管理员账号" />
          </el-form-item>
          <el-form-item label="管理员密码" prop="adminPwd">
            <el-input v-model="ruleForm.adminPwd" placeholder="请输入管理员密码" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { addcountgUpdate, AddBranch, companyGetcityAPI } from "@/api/branch/company";
import { branchAddParams } from "@/api/branch/type";
const value = ref([]);
const options = ref<any[]>([]);
const dialogVisible = defineModel<boolean>();

const emit = defineEmits(["close"]);

const ruleForm = reactive<branchAddParams>({
  address: "",
  adminMobile: "",
  adminName: "",
  adminPwd: "",
  adminUserName: "",
  city: "",
  id: 0,
  name: "",
  province: "",
});

// 省
const City = () => {
  companyGetcityAPI().then((res: any) => {
    options.value = res;
  });
};

const handlechange = (value: any) => {
  ruleForm.city = value[1];
  ruleForm.province = value[0];
};

onMounted(() => {
  City();
  if (props.listParams.id !== 0) {
    Object.assign(ruleForm, props.listParams);
  }
});

const props = withDefaults(defineProps<{ listParams: branchAddParams }>(), {
  listParams: () => ({
    id: 0,
    name: "",
    province: "",
    city: "",
    address: "",
    telephone: "",
    startTime: "",
    adminId: "",
    legalPerson: "",
    mobile: "",
    creditCode: "",
    license: 0,
    medicalPoint: 0,
    house: 0,
    certificate: "",
    picture: "",
    adminPwd: "",
    adminUserName: "",
    adminName: "",
    adminMobile: "",
    addTime: "",
  }),
});

// 添加
const submitForm = async () => {
  let res = await AddBranch(ruleForm);
  // console.log("添加", res);
  ElMessage.success("添加成功");
  emit("close");
};

// 修改
const uploadEdit = async () => {
  let res = await addcountgUpdate(ruleForm);
  // console.log("修改", res);
  ElMessage.success("修改成功");
  emit("close");
};
const submit = () => {
  ruleFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      ruleForm.id === 0 ? await submitForm() : await uploadEdit();
    }
  });
};

// 表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<branchAddParams>>({
  name: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
  address: [{ required: true, message: "请输入所属区域", trigger: "blur" }],
  adminName: [{ required: true, message: "请输入管理员名称", trigger: "blur" }],
  adminMobile: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    { pattern: /^[0-9]{11}$/, message: "手机号码格式不正确", trigger: "blur" },
  ],
  adminUserName: [{ required: true, message: "请输入管理员账号", trigger: "blur" }],
  adminPwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
});

const handleClose = () => {
  emit("close");
};

function resetForm() {
  throw new Error("Function not implemented.");
}
</script>
<style scoped></style>
